<template>
	<div>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleClose"
		>
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- <textarea id="uTinymce"></textarea> -->
    <Editor
        :id="tinymceId"
        ></Editor>

		<el-button type="text" @click="dialogVisible = true"
			>点击打开 Dialog</el-button
		>
		<button @click="changeTinymce">点击</button>
	</div>
</template>

<script>
import '@/components/a'
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue"; //编辑器引入
import "tinymce/themes/silver/theme"; //编辑器主题
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/paste"; //粘贴过滤
import "tinymce/plugins/preview"; //预览
export default {
	data() {
		return {
			myValue: "",
			flag: true,
			hideAdd: false,
			dialogVisible: false,
      init: {
                    selector: '#tinymce',
                    language_url: '/zh_CN.js',//汉化路径是自定义的，一般放在public或static里面
                    language: 'zh_CN',
                    skin_url: '/skins/ui/oxide',
                    content_css: `/skins/content/default/content.css`,
                    plugins: this.plugins,//插件
                    //工具栏
                    menubar: false, //隐藏菜单栏
                    toolbar: 'undo redo|bold italic forecolor|link preview', //字体大小
                    height: 500,//高度
                    placeholder: '在这里输入文字',
                    branding: false,//隐藏右下角技术支持
                    paste_preprocess: function(plugin, args) {
                        console.log(args.content);
                    },
                    paste_as_text: true,
                    //init_instance_callback为回调配置项
                    init_instance_callback:(editor) => {  
                        // console.log(`回调----`)
                        editor.on('input',e => {
                            // console.log('文本框input触发')
                            this.$emit('input',e.target.innerHTML)
                        });
                        editor.on('change',e => {
                            // console.log('文本框change触发')
                            this.$emit('change',e.level.content)
                        })
                    }
                }
		};
	},
  components: {
    Editor
  },
	mounted() {
    tinymce.init({})
		// tinymce.init({
		// 	selector: "#uTinymce",
		// 	// inline: true,
		// 	height: 500,
		// 	// width: "100%",
		// 	language_url: "/zh_CN.js",
		// 	language: "zh_CN",
		// 	content_css: "/skins/content/document/content.css",
		// });
		// tinymce.init({
		//   selector: '#uTinymce',
		//   plugins: ['link', 'paste', 'table'],
		//   toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | table',
		//   menubar: false
		// });
	},
	methods: {
		// tinymce.remove('#tinyDom')
		changeTinymce() {
			// location.reload
			this.flag = !this.flag;
			// if(!this.flag) return tinymce.remove('#tinyDom')
		},
		handleClose(done) {
			this.$confirm("确认关闭？")
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
	},
};
</script>

<style></style>
